/*
 * Photogenic by FreeHTML5.co
 * URL: https://freehtml5.co
 */
 /* html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
 } */
 
 html{
    background-image: url("../images/banner5.jpg");
  background-size: cover;
    height: 100%;
    overflow: hidden;
  }

  :root {
    --default: #121213;
    --empty: #3a3a3c;
    --wrong: #b59f3b;
    --right: #538d4e;
}

 a {
   text-decoration: none !important;
 }
 
 .read-more {
   color: #fff !important;
   font-family: "Larsseit";
   font-size: 14px;
   padding: 10px 25px;
   border-radius: 20px;
   display: inline-block;
 }
 .read-more:hover {
   box-shadow: 0px 2px 5px #cccccc;
   transition: all 0.3s;
 }
 
 .back-bg {
   position: absolute;
   min-height: 600px;
 }
 @media (max-width: 1199px) {
   .back-bg {
     height: 100%;
     min-height: 400px;
     margin-bottom: 100px;
   }
 }
 @media (max-width: 450px) {
   .back-bg {
     width: 100%;
     min-height: 320px;
     margin-left: -30px;
   }
 }
 
 .fh5co-portfolio {
   padding-bottom: 0;
 }
 .fh5co-portfolio h3 {
   font-family: "Larsseit-Medium";
   color: #1e1f29;
   text-transform: uppercase;
   line-height: 1.2;
   margin: 20px 0;
 }
 .fh5co-portfolio p {
   max-width: 512px;
   margin-top: 20px;
 }
 
 .portfolio-tab {
   background-color: #ffffff;
   box-shadow: 0px 3px 27px 0px rgba(0, 0, 0, 0.04);
 }
 .portfolio-tab ul {
   margin-bottom: 30px;
 }
 .portfolio-tab ul li {
   list-style-type: none;
   display: inline-block;
 }
 .portfolio-tab ul li a {
   color: #aeafb9;
   padding: 15px 5px;
   font-size: 13px;
   display: block;
 }
 .portfolio-tab ul li a.active {
   background-image: linear-gradient(to bottom, rgba(18, 112, 228, 0.071), rgba(18, 112, 228, 0.071), transparent);
   background-image: -moz-linear-gradient(to bottom, rgba(18, 112, 228, 0.071), rgba(18, 112, 228, 0.071), transparent);
   background-image: -webkit-linear-gradient(to bottom, rgba(18, 112, 228, 0.071), rgba(18, 112, 228, 0.071), transparent);
   background-image: -ms-linear-gradient(to bottom, rgba(18, 112, 228, 0.071), rgba(18, 112, 228, 0.071), transparent);
   border-top: 5px solid #1270e4;
   color: #1270e4;
 }
 
 .portfolioFilter {
   padding: 15px 0 5px 0;
   width: 100%;
 }
 
 .portfolioContainer {
   border-radius: 3px;
   width: 100%;
 }
 
 .isotope-item {
   z-index: 2;
 }
 
 .isotope-hidden.isotope-item {
   pointer-events: none;
   z-index: 1;
 }
 
 .isotope,
 .isotope .isotope-item {
   /* change duration value to whatever you like */
   -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   transition-duration: 0.8s;
 }
 
 .isotope {
   -webkit-transition-property: height, width;
   -moz-transition-property: height, width;
   transition-property: height, width;
 }
 
 .isotope .isotope-item {
   -webkit-transition-property: -webkit-transform, opacity;
   -moz-transition-property: -moz-transform, opacity;
   transition-property: transform, opacity;
 }
 
 .gallary {
   width: 25%;
   padding: 7px;
 }
 .gallary img {
   width: 100%;
   height: 600px;
 }
 .gallary img.half-height {
   height: 293px;
 }
 .gallary .card-img-overlay {
   transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -moz-transition: all 0.3s;
   -o-transition: all 0.3s;
   display: none;
 }
 .gallary:hover .card-img-overlay {
   display: block;
 }
 @media (max-width: 991px) {
   .gallary {
     width: 50%;
   }
   .gallary img {
     height: auto;
   }
   .gallary img.half-height {
     height: auto;
   }
 }
 @media (max-width: 450px) {
   .gallary {
     width: 100%;
   }
 }
 
 .center-img {
   width: 50%;
 }
 @media (max-width: 450px) {
   .center-img {
     width: 100%;
   }
 }
 
 .top-buttons .img-icon {
   border-radius: 50%;
   background-color: white;
   box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.23);
   width: 42px;
   height: 42px;
   display: block;
   text-align: center;
   float: left;
   margin-right: 10px;
 }
 .top-buttons .img-icon img {
   height: auto;
   max-width: 20px;
   margin-top: 12px;
 }
 .top-buttons .txt {
   top: 8px;
   position: relative;
 }
 .top-buttons a {
   color: #fff;
   float: left;
 }
 .top-buttons a:nth-child(2) {
   float: right;
 }
 
 .bottom-buttons {
   position: absolute;
   bottom: 20px;
   display: block !important;
   left: 20px;
   right: 20px;
 }
 .bottom-buttons a {
   font-size: 14.583px;
   font-family: "Larsseit";
   background: #ffffff;
   display: block;
   padding: 8px 20px 20px 20px;
   border-radius: 30px;
   height: 50px;
 }
 .bottom-buttons a .txt {
   background: -webkit-linear-gradient(left, #1270e4, #58c0ff);
   background: -ms-linear-gradient(left, #1270e4, #58c0ff);
   background: -moz-linear-gradient(left, #1270e4, #58c0ff);
   background: -o-linear-gradient(left, #1270e4, #58c0ff);
   -webkit-background-clip: text;
   -ms-background-clip: text;
   -o-background-clip: text;
   -webkit-text-fill-color: transparent;
   -ms-text-fill-color: transparent;
   -o-text-fill-color: transparent;
 }
 .bottom-buttons .img-icon {
   box-shadow: none;
   background: transparent;
   height: auto;
   width: auto;
 }
 
 .indicators {
   margin: 50px auto;
 }
 .indicators li {
   display: inline-block;
   list-style-type: none;
   margin: 0 4px;
 }
 .indicators li a {
   border-radius: 50%;
   background-color: #ebebeb;
   width: 16px;
   height: 16px;
   display: block;
 }
 .indicators li a.active {
   border-width: 0.8px;
   border: 1px solid #1270e4;
   border-radius: 50%;
   height: 20px;
   width: 20px;
 }
 .indicators li a.active::after {
   position: absolute;
   content: "";
   background-image: -moz-linear-gradient(-11deg, #1270e4 0%, #58c0ff 100%);
   background-image: -webkit-linear-gradient(-11deg, #1270e4 0%, #58c0ff 100%);
   background-image: -ms-linear-gradient(-11deg, #1270e4 0%, #58c0ff 100%);
   height: 10px;
   width: 10px;
   border-radius: 50%;
   margin-top: 4px;
   margin-left: 4px;
 }
 
 .card {
   border: none;
 }
 
 .fh5co-news {
   background: #fdfdfd;
   padding-top: 50px;
   padding-bottom: 0;
 }
 .fh5co-news .row {
   padding: 0 80px;
 }
 @media (max-width: 767px) {
   .fh5co-news .row {
     padding: 0;
   }
 }
 .fh5co-news h2 {
   text-align: center;
   margin-bottom: 50px;
 }
 .fh5co-news h5 {
   font-family: "Larsseit-Medium";
   color: #1e1f29;
   font-size: 21px;
 }
 .fh5co-news p {
   font-size: 16px;
   line-height: 1.4;
   margin-top: 20px;
 }
 .fh5co-news .card {
   box-shadow: 0px 8px 29px 0px rgba(23, 23, 23, 0.03);
 }
 .fh5co-news .card-body {
   padding: 30px 40px !important;
 }
 .fh5co-news .owl-nav {
   display: none;
 }
 .fh5co-news .owl-carousel2 .owl-dots {
   text-align: center;
   margin: 20px auto;
   display: block;
 }
 .fh5co-news .owl-carousel2 .owl-dots button {
   outline: none !important;
 }
 .fh5co-news .owl-carousel2 .owl-dots span {
   position: relative;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   display: block;
   background: #ebebeb;
   margin: 0 5px;
 }
 .fh5co-news .owl-carousel2 .owl-dots .active {
   box-shadow: none;
 }
 .fh5co-news .owl-carousel2 .owl-dots .active span {
   box-shadow: none;
   margin-bottom: -1px;
 }
 .fh5co-news .owl-carousel2 .owl-item {
   margin-bottom: 20px;
 }
 .fh5co-news .owl-carousel2 .owl-nav {
   display: block !important;
   position: absolute;
   top: 25%;
   width: 100%;
 }
 .fh5co-news .owl-carousel2 .owl-prev,
 .fh5co-news .owl-carousel2 .owl-next {
   font-size: 50px !important;
   color: #666666;
   position: absolute;
   outline: none;
   background: #f4f5f6 !important;
   border-radius: 50%;
   height: 68px;
   width: 68px;
 }
 .fh5co-news .owl-carousel2 .owl-prev span,
 .fh5co-news .owl-carousel2 .owl-next span {
   position: relative;
   top: -7px;
 }
 .fh5co-news .owl-carousel2 .owl-prev:hover,
 .fh5co-news .owl-carousel2 .owl-next:hover {
   color: #1270e4;
   background: #ffffff !important;
   box-shadow: 0px 11px 10px 0px rgba(0, 0, 0, 0.07);
 }
 @media (max-width: 767px) {
   .fh5co-news .owl-carousel2 .owl-prev,
   .fh5co-news .owl-carousel2 .owl-next {
     display: none !important;
   }
 }
 .fh5co-news .owl-carousel2 .owl-prev {
   left: -100px;
 }
 .fh5co-news .owl-carousel2 .owl-next {
   right: -100px;
 }
 
 footer.fh5co-footer h2 {
   margin-top: 80px;
 }
 footer.fh5co-footer .light {
   font-family: "Larsseit-Light";
   font-size: 18px;
 }
 footer.fh5co-footer p {
   margin: 20px 0;
 }
 footer.fh5co-footer p span {
   margin-right: 10px;
 }
 footer.fh5co-footer p span.phone {
   top: -2px;
   position: relative;
 }
 footer.fh5co-footer p b {
   color: #1e1f29;
   font-family: "Gilroy-Light";
   font-weight: 700;
   font-size: 16px;
 }
 footer.fh5co-footer h3 {
   font-family: "Larsseit-Bold";
   font-size: 33px;
   color: #1e1f29;
   text-transform: uppercase;
 }
 footer.fh5co-footer .social-links {
   display: inline-block !important;
   margin-top: 20px;
 }
 footer.fh5co-footer .social-links li {
   border-color: #1e1f29;
   float: left;
 }
 footer.fh5co-footer .social-links li a {
   color: #1e1f29;
 }
 @media (max-width: 991px) {
   footer.fh5co-footer .col-lg-5 {
     text-align: center;
     margin-bottom: 50px;
   }
   footer.fh5co-footer .social-links {
     display: inline-block !important;
     margin-top: 20px;
     float: none !important;
     width: auto;
   }
 }
 
 .form-box {
   border-radius: 3px;
   background-color: white;
   box-shadow: 0px 29px 57px 0px rgba(22, 20, 24, 0.06);
   padding: 50px;
 }
 .form-box h4 {
   font-family: "Larsseit-Bold";
   font-size: 33px;
   color: #1e1f29;
   text-transform: uppercase;
 }
 .form-box h4::after {
   position: absolute;
   content: "";
   height: 10px;
   width: 10px;
   margin-top: 20px;
   margin-left: 10px;
 }
 .form-box p {
   font-size: 18px;
 }
 .form-box hr {
   border: none;
   border-top: 1px solid #f7f7f7;
 }
 .form-box input[type="text"],
 .form-box textarea {
   border: 1px solid #ebebeb;
   background-color: rgba(235, 235, 235, 0.09);
   padding: 30px;
   border-radius: 40px;
 }
 .form-box textarea {
   resize: none;
   min-height: 140px;
   border-radius: 20px;
 }
 .form-box button {
   color: #fff;
   font-size: 14px;
   font-family: "Larsseit";
   padding: 13px 35px;
   border-radius: 40px;
   border: none;
   cursor: pointer;
   margin-top: 20px;
 }
 @media (max-width: 550px) {
   .form-box {
     padding: 20px;
   }
 }
 
 .copy {
   text-align: center;
   background: #f7f7f7;
   padding: 40px 0;
   display: block;
   font-family: "Gilroy-Light";
 }
 
 .parallax-window {
   min-height: 1027px;
   position: relative;
   z-index: 55;
   top: 0;
   left: 0;
   right: 0;
   min-height: 1027px;
 }
 
 .link
 {
    color:aqua;
    text-decoration: none; 
    background-color: none;
 }
 
 


h1 {
    text-align: center;
    }
    
    
    
    #game-board {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 400px;
    }
    
    .letter-box {
    width: 60px;
    height: 60px;
    border: 2px solid var(--empty);
    margin: 4px;
    color: white;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    }
    
    .filled-box {
    border: 2px solid black;
    }
    
    .letter-row {
    display: flex;
    }
    
    #keyboard-cont {
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    
    #keyboard-cont div {
    display: flex;
    }
    
    .second-row {
    margin: 0.5rem 0;
    }
    
    .keyboard-button {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 0 2px;
    cursor: pointer;
    text-transform: uppercase;
    }
    .title {
    color: white;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3rem;
    margin-bottom: 0;
    position: relative;
    }
    .title-word-clone {
    position: absolute;
    left: calc(50% + 75px);
    transform: rotate(25deg);
    color: yellow;
    font-size: 1.2rem;
    }
    
    .footer {
    display: flex;
    justify-content: center;
    color: white;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    .toast{
    background-color: #222222;
    color:#FFFFFF;
    background-image:none !important; /*Removes Pesky Default Toast Icon*/
    padding: 15px 15px 15px 15px !important; /*Corrects Spacing for default icon*/
    text-align:center;
    font-size: 1.5rem;
    }